{% extends "kjs/rainbow/frame/create.html" %}

{% block common_script %}
    {{ block.super }}
    <script type="text/javascript">
        var photoImageDictData = [{% for photo_cell in photo_instance.photos.all %}
            {
                id:{{ photo_cell.image.id }},
                uuid:"{{ photo_cell.image.uuid }}",
                width:{{ photo_cell.image.width }},
                height:{{ photo_cell.image.height }},
                size:{{ photo_cell.image.size }},
                type:"{{ photo_cell.image.content_type.name }}"
            }{% if not forloop.last %},{% endif %}
        {% endfor %}];
        $(document).ready(function(){
            var rainbowImagePreviewListWidget = $("div#rainbow_image_list_widget");
            for (var i=0; i<photoImageDictData.length; i++) {
                var dataDict = photoImageDictData[i];
                rainbowImagePreviewListWidget.rainbowImagePreviewList("addWidget", dataDict);
            }
            var labelContainer = $("div#rainbow_image_label").find("ul");
            var labels = $('{{ form.labels }}').val();
            if (!($.isEmptyObject(labels))) {
                labels = JSON.parse(labels);
                var label = labels.pop();
                while (!$.isEmptyObject(label)) {
                    labelContainer.rainbowPhotoFrameLabelAdd({label:label});
                    label = labels.pop();
                }
                var labelInput = $("input#id_rainbow_image_label");
                var l = labelInput.parent().find("label[for='" + labelInput.attr("id") + "']");
                l.css({
                    top:labelInput.offset().top
                });
                l.show();
            }
            $("div.rainbowStyleWidget").removeClass("rainbowStyleWidgetSelected");
            $("div#rainbow_image_style_widget_{{ form.layout.value }}").addClass("rainbowStyleWidgetSelected");

            $("input#rainbow_image_subject").val('{{ form.subject.value }}');
        });
    </script>
{% endblock %}